<template>
	<u-popup
		v-model="messageShow"
		mode="bottom"
		:mask-close-able="false"
		class="chicken-edit">
		<view class="box">
			<scroll-view
				scroll-y
				@scrolltolower="scrolltolower"
				class="center">
				<view
					v-for="(val, index) in messageList"
					:key="index"
					class="item">
					<image
						src="/static/images/chicken/message.png"
						mode="widthFix"></image>
					<view class="item-right">
						<view>{{ val.content }}</view>
						<view>{{ val.time }}</view>
					</view>
				</view>
			</scroll-view>
			
			<image
				class="bg"
				src="/static/images/chicken/bg_message1.png"
				mode="widthFix"></image>
			<image
				class="close"
				@click="changeShow"
				src="/static/images/chicken/close.png"
				mode="widthFix"></image>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'myMessage',
		props: {
			messageShow: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				messageList: [
					{ content: '你对你的小鸡进行了投喂，投喂了180g饲料。', time: '11月20日 12:07' },
					{ content: '今天的每日任务已经刷新，快去尝试新的挑战吧！获得丰厚奖励等你拿！', time: '11月20日 12:07' },
					{ content: '恭喜您，您养的小鸡已经长大了，您可以收割并获得丰富的奖励了！', time: '11月20日 12:07' },
					{ content: '您的农园刚刚收获了10个饲料！欢迎长时间在线完成更多任务，赚取更多的鸡蛋！', time: '11月20日 12:07' },
				]
			}
		},
		mounted() {
			
		},
		methods: {
			changeShow() {
				this.$emit('changeShow', 'messageShow');
			},
			scrolltolower() {
				console.log(1111111111);
			},
		}
	}
</script>

<style lang="scss" scoped>
.chicken-edit {
	.box {
		position: relative;
		width: 100%;
		min-height: 1130rpx;
		background-color: transparent;
		.center {
			position: absolute;
			left: 0;
			top: 284rpx;
			z-index: 1;
			width: 100%;
			height: calc(100% - 284rpx);
			text-align: center;
			.item {
				display: flex;
				padding: 33rpx 47rpx;
				image {
					width: 74rpx;
				}
				&:not(:last-of-type) {
					border-bottom: 1px solid rgba(#9C6D44, .15);
				}
				.item-right {
					width: calc(100% - 90rpx - 8rpx);
					margin-left: 16rpx;
					color: #732011;
					text-align: left;
					view:first-of-type {
						font-size: 28rpx;
						line-height: 1.5;
					}
					view:last-of-type {
						margin-top: 4rpx;
						font-size: 24rpx;
						opacity: .5;
					}
				}
			}
		}
		.bg {
			width: 100%;
			margin-bottom: -10rpx;
		}
		.close {
			position: absolute;
			right: 30rpx;
			top: 220rpx;
			width: 46rpx;
		}
	}
}
</style>